<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Endpoint-Transparent Multipath in Software Defined Networks Demo">
    <meta name="author" content="Dario Banfi">

    <title>Multipath SDN Demo</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-12 text-center">
                <h1>Endpoint-Transparent Multipath in Software Defined Networks</h1>
                <p class="lead">Demo</p>
                <button type="button" class="btn btn-success" aria-label="Left Align" onclick="startMessage();">
                    Start
                </button>
            </div>
        </div>
        <br><br>
        <div class="row" style="height: 150px;">
            <div id="textDiv" class="col-lg-12 text-center" >
                <p id="mt" style="font-size: 20px;"></p>
                <p id="st" style="font-size: 40px;">Not ready, refresh</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="well">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="600px" height="481px" viewBox="0 0 500 381" enable-background="new 0 0 500 381" xml:space="preserve">
                    <path id="s1" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M129.736,176.751c-14.442,0-26.15,11.708-26.15,26.149
                        s11.708,26.149,26.15,26.149c14.443,0,26.15-11.708,26.15-26.149C155.886,188.459,144.179,176.751,129.736,176.751z M140.715,217.07
                        l-10.108-14.063l-10.109,14.063l10.109-14.063l-10.109-14.064l10.109,14.064l10.108-14.064l-10.108,14.064L140.715,217.07z"/>
                    <path id="s4" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M208.632,236.863c-14.442,0-26.15,11.707-26.15,26.148
                        s11.708,26.149,26.15,26.149c14.443,0,26.15-11.708,26.15-26.149S223.075,236.863,208.632,236.863z M219.61,277.184l-10.108-14.062
                        l-10.108,14.062l10.108-14.062l-10.108-14.062l10.108,14.062l10.108-14.062l-10.108,14.062L219.61,277.184z"/>
                    <path id="s2" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M208.632,116.901c-14.442,0-26.15,11.708-26.15,26.15
                        c0,14.442,11.708,26.149,26.15,26.149c14.443,0,26.15-11.707,26.15-26.149C234.782,128.609,223.075,116.901,208.632,116.901z
                         M219.61,157.01l-10.108-14.064l-10.108,14.064l10.108-14.064l-10.108-14.064l10.108,14.064l10.108-14.064l-10.108,14.064
                        L219.61,157.01z"/>
                    <path id="s6" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M377.633,176.726c-14.441,0-26.148,11.708-26.148,26.15
                        c0,14.442,11.707,26.149,26.148,26.149s26.149-11.707,26.149-26.149C403.782,188.434,392.074,176.726,377.633,176.726z
                         M386.871,217.045l-10.109-14.064l-10.106,14.064l10.106-14.064l-10.106-14.062l10.106,14.062l10.109-14.062l-10.109,14.062
                        L386.871,217.045z"/>
                    <path id="s5" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M298.736,236.838c-14.443,0-26.15,11.707-26.15,26.148
                        c0,14.443,11.707,26.149,26.15,26.149c14.44,0,26.148-11.706,26.148-26.149C324.886,248.545,313.179,236.838,298.736,236.838z
                         M307.975,277.157l-10.106-14.063l-10.108,14.063l10.108-14.063l-10.108-14.062l10.108,14.062l10.106-14.062l-10.106,14.062
                        L307.975,277.157z"/>
                    <path id="s3" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M298.736,116.876c-14.443,0-26.15,11.708-26.15,26.15
                        s11.707,26.149,26.15,26.149c14.44,0,26.148-11.707,26.148-26.149S313.179,116.876,298.736,116.876z M307.975,156.984
                        l-10.106-14.064l-10.108,14.064l10.108-14.064l-10.108-14.064l10.108,14.064l10.106-14.064l-10.106,14.064L307.975,156.984z"/>
                    <g id="srcimg">
                        <path fill="#2E3192" stroke="#000000" stroke-miterlimit="10" d="M78.744,158.856H38.187c-1.724,0-3.124,1.4-3.124,3.124v71.761
                            c0,1.724,1.4,3.123,3.124,3.123h40.558c1.722,0,3.123-1.399,3.123-3.123V161.98C81.867,160.256,80.466,158.856,78.744,158.856
                            L78.744,158.856z M58.465,216.234c-2.59,0-4.678-2.104-4.678-4.676c0-2.591,2.087-4.682,4.678-4.682
                            c2.59,0,4.677,2.091,4.677,4.682C63.143,214.131,61.055,216.234,58.465,216.234L58.465,216.234z M75.621,193.473H41.312v-1.553
                            h34.309V193.473z M75.621,184.119H41.312v-1.571h34.309V184.119z M75.621,173.97H41.312v-9.353h34.309V173.97z"/>
                        <path fill="#2E3192" stroke="#000000" stroke-miterlimit="10" d="M73.016,171.029c0,0.44-0.701,0.792-1.554,0.792
                            c-0.869,0-1.569-0.353-1.569-0.792c0-0.425,0.701-0.777,1.569-0.777C72.314,170.252,73.016,170.604,73.016,171.029L73.016,171.029z
                            "/>
                    </g>
                    <g id="h2img">
                        <path fill="#FFF200" stroke="#000000" stroke-miterlimit="10" d="M312.079,306.673h-26.687c-1.136,0-2.057,0.921-2.057,2.056
                            v47.217c0,1.136,0.921,2.057,2.057,2.057h26.687c1.133,0,2.055-0.921,2.055-2.057v-47.217
                            C314.134,307.594,313.212,306.673,312.079,306.673L312.079,306.673z M298.736,344.427c-1.704,0-3.078-1.384-3.078-3.077
                            c0-1.703,1.374-3.08,3.078-3.08c1.703,0,3.076,1.377,3.076,3.08C301.812,343.043,300.439,344.427,298.736,344.427L298.736,344.427z
                             M310.024,329.449h-22.575v-1.021h22.575V329.449z M310.024,323.295h-22.575v-1.033h22.575V323.295z M310.024,316.617h-22.575
                            v-6.153h22.575V316.617z"/>
                        <path fill="#FFF200" stroke="#000000" stroke-miterlimit="10" d="M308.31,314.684c0,0.289-0.461,0.521-1.021,0.521
                            c-0.571,0-1.032-0.23-1.032-0.521c0-0.279,0.461-0.512,1.032-0.512C307.849,314.172,308.31,314.402,308.31,314.684L308.31,314.684z
                            "/>
                    </g>
                    <g id="dstimg">
                        <path fill="#006838" stroke="#000000" stroke-miterlimit="10" d="M468.483,158.856h-40.56c-1.724,0-3.123,1.4-3.123,3.124v71.761
                            c0,1.724,1.399,3.123,3.123,3.123h40.56c1.722,0,3.124-1.399,3.124-3.123V161.98C471.607,160.256,470.205,158.856,468.483,158.856
                            L468.483,158.856z M448.205,216.234c-2.59,0-4.678-2.104-4.678-4.676c0-2.591,2.088-4.682,4.678-4.682s4.678,2.091,4.678,4.682
                            C452.883,214.131,450.795,216.234,448.205,216.234L448.205,216.234z M465.36,193.473H431.05v-1.553h34.311V193.473z
                             M465.36,184.119H431.05v-1.571h34.311V184.119z M465.36,173.97H431.05v-9.353h34.311V173.97z"/>
                        <path fill="#006838" stroke="#000000" stroke-miterlimit="10" d="M462.755,171.029c0,0.44-0.7,0.792-1.554,0.792
                            c-0.868,0-1.569-0.353-1.569-0.792c0-0.425,0.701-0.777,1.569-0.777C462.055,170.252,462.755,170.604,462.755,171.029
                            L462.755,171.029z"/>
                    </g>
                    <g id="h1img">
                        <path fill="#FFF200" stroke="#000000" stroke-miterlimit="10" d="M222.845,306.673h-26.686c-1.134,0-2.055,0.921-2.055,2.056
                            v47.217c0,1.136,0.921,2.057,2.055,2.057h26.686c1.133,0,2.055-0.921,2.055-2.057v-47.217
                            C224.9,307.594,223.978,306.673,222.845,306.673L222.845,306.673z M209.502,344.427c-1.704,0-3.078-1.384-3.078-3.077
                            c0-1.703,1.374-3.08,3.078-3.08c1.705,0,3.078,1.377,3.078,3.08C212.58,343.043,211.207,344.427,209.502,344.427L209.502,344.427z
                             M220.79,329.449h-22.575v-1.021h22.575V329.449z M220.79,323.295h-22.575v-1.033h22.575V323.295z M220.79,316.617h-22.575v-6.153
                            h22.575V316.617z"/>
                        <path fill="#FFF200" stroke="#000000" stroke-miterlimit="10" d="M219.076,314.684c0,0.289-0.461,0.521-1.022,0.521
                            c-0.571,0-1.033-0.23-1.033-0.521c0-0.279,0.461-0.512,1.033-0.512C218.615,314.172,219.076,314.402,219.076,314.684
                            L219.076,314.684z"/>
                    </g>
                    <text id="srclabel" transform="matrix(1 0 0 1 33.063 147.0518)" font-family="'Cmr17'" font-size="18.0154">Source</text>
                    <text id="dstlabel" transform="matrix(1 0 0 1 405.7822 147.0518)" font-family="'Cmr17'" font-size="18.0154">Destination</text>
                    <text id="h1label" transform="matrix(1 0 0 1 203.6665 369.334)" font-family="'Cmr17'" font-size="12">H1</text>
                    <text id="h2label" transform="matrix(1 0 0 1 292 369.334)" font-family="'Cmr17'" font-size="12">H2</text>
                    <rect id="srclink" x="81.517" y="199.9" width="22" height="6"/>
                    <g id="controllerimg">
                        <g id="_x32_4_21_">
                            <g>
                                <path fill="#414042" stroke="#000000" stroke-miterlimit="10" d="M270.385,31.36c0-0.114,0-0.229,0-0.343v-3.084v-0.265h-13.164
                                    H255.7v3.691v28.354h0.01v0.265h13.153h1.521h0.008v-1.662c0.006-0.041,0.006-0.079,0-0.116v-1.913h-0.008
                                    C270.385,47.977,270.385,39.67,270.385,31.36z M258.592,42.846c0-0.24,0.193-0.436,0.436-0.436h8.062
                                    c0.24,0,0.436,0.195,0.436,0.436v0.916c0,0.24-0.191,0.437-0.436,0.437h-8.062c-0.238,0-0.436-0.195-0.436-0.437V42.846z
                                     M267.613,48.561c0,0.242-0.191,0.438-0.438,0.438h-8.062c-0.241,0-0.437-0.193-0.437-0.438v-0.914
                                    c0-0.241,0.193-0.436,0.437-0.436h8.062c0.241,0,0.438,0.193,0.438,0.436V48.561z M267.613,38.996
                                    c0,0.24-0.191,0.436-0.438,0.436h-8.062c-0.241,0-0.437-0.195-0.437-0.436V38.08c0-0.241,0.193-0.436,0.437-0.436h8.062
                                    c0.241,0,0.438,0.194,0.438,0.436V38.996z M267.613,34.412c0,0.24-0.191,0.436-0.438,0.436h-8.062
                                    c-0.241,0-0.437-0.195-0.437-0.436v-0.916c0-0.241,0.193-0.436,0.437-0.436h8.062c0.241,0,0.438,0.194,0.438,0.436V34.412z"/>
                                <path fill="#414042" stroke="#000000" stroke-miterlimit="10" d="M271.363,27.669V59.98l0.033-0.008v0.008l15.342-1.026
                                    l-0.01-0.134h0.01V29.855l0.02-0.521L271.363,27.669z M274.602,37.977c0.006-0.232,0.198-0.416,0.434-0.409l7.77,0.202
                                    c0.229,0.006,0.412,0.197,0.404,0.43l-0.021,0.883c-0.006,0.23-0.201,0.415-0.434,0.409l-7.768-0.202
                                    c-0.229-0.006-0.414-0.199-0.41-0.432L274.602,37.977z M282.762,48.475l-7.764,0.27c-0.232,0.008-0.428-0.173-0.438-0.404
                                    l-0.027-0.883c-0.01-0.23,0.172-0.426,0.402-0.434l7.766-0.271c0.23-0.008,0.426,0.174,0.434,0.405l0.031,0.882
                                    C283.176,48.271,282.992,48.467,282.762,48.475z M283.24,43.562c0,0.231-0.188,0.42-0.418,0.42h-7.771
                                    c-0.232,0-0.42-0.188-0.42-0.42V42.68c0-0.231,0.188-0.42,0.42-0.42h7.771c0.229,0,0.418,0.188,0.418,0.42V43.562z
                                     M283.199,34.857c-0.02,0.231-0.221,0.406-0.449,0.39L275,34.693c-0.23-0.018-0.406-0.217-0.391-0.449l0.062-0.88
                                    c0.021-0.231,0.22-0.405,0.449-0.39l7.748,0.554c0.231,0.017,0.405,0.217,0.39,0.448L283.199,34.857z"/>
                                <path fill="#414042" stroke="#000000" stroke-miterlimit="10" d="M239.201,29.855v28.963h0.008l-0.008,0.134l15.34,1.024v-0.008
                                    l0.035,0.008V27.669l-15.393,1.666L239.201,29.855z M251.375,48.339c-0.008,0.231-0.201,0.412-0.436,0.404l-7.765-0.271
                                    c-0.231-0.008-0.413-0.201-0.404-0.435l0.031-0.881c0.008-0.229,0.2-0.413,0.433-0.405l7.766,0.271
                                    c0.229,0.008,0.412,0.203,0.403,0.434L251.375,48.339z M242.699,43.562V42.68c0-0.231,0.188-0.42,0.418-0.42h7.771
                                    c0.23,0,0.42,0.188,0.42,0.42v0.883c0,0.231-0.188,0.42-0.42,0.42h-7.771C242.887,43.982,242.699,43.794,242.699,43.562z
                                     M251.361,38.857c0.006,0.232-0.178,0.425-0.41,0.432l-7.767,0.202c-0.229,0.006-0.425-0.177-0.431-0.409l-0.021-0.883
                                    c-0.007-0.232,0.178-0.424,0.408-0.43l7.768-0.202c0.23-0.005,0.424,0.177,0.43,0.409L251.361,38.857z M243.067,33.529
                                    l7.75-0.553c0.231-0.018,0.435,0.156,0.449,0.389l0.062,0.88c0.02,0.231-0.158,0.433-0.391,0.449l-7.75,0.554
                                    c-0.23,0.016-0.432-0.158-0.449-0.389l-0.061-0.881C242.662,33.746,242.836,33.546,243.067,33.529z"/>
                            </g>
                        </g>
                    </g>
                    <text id="controllerlabel" transform="matrix(1 0 0 1 224.9004 21.0518)" font-family="'Cmr17'" font-size="18.0154">Controller</text>
                    <rect id="link12" x="146.27" y="170.742" transform="matrix(0.8198 -0.5727 0.5727 0.8198 -68.9144 128.4975)" width="46.867" height="6"/>
                    <rect id="link45" x="235.1" y="260.014" width="37.486" height="6"/>
                    <rect id="link23" x="234.782" y="140.025" width="37.485" height="6"/>
                    <rect id="link56" x="314.907" y="230.282" transform="matrix(0.8198 -0.5727 0.5727 0.8198 -72.6202 235.7976)" width="46.868" height="6"/>
                    <rect id="link14" x="144.353" y="231.389" transform="matrix(-0.8198 -0.5726 0.5726 -0.8198 171.1274 522.6249)" width="46.866" height="6.001"/>
                    <rect id="link36" x="314.925" y="169.806" transform="matrix(-0.8198 -0.5726 0.5726 -0.8198 516.8018 508.2254)" width="46.866" height="6.002"/>
                    <rect id="dstlink" x="403.417" y="200.876" width="21.365" height="6"/>
                    <rect id="h2link" x="295.736" y="289.137" width="6" height="17.488"/>
                    <rect id="h1link" x="205.632" y="289.137" width="6" height="17.488"/>
                    <g id="adown1">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="239.183" y1="61.667" x2="139.617" y2="168.408"/>
                            <g>
                                <path d="M135.5,172.821c1.167-2.795,2.255-6.598,2.353-9.494l2.304,4.502l4.65,1.985
                                    C141.925,170.112,138.207,171.462,135.5,172.821z"/>
                            </g>
                        </g>
                    </g>
                    <g id="aup1">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="129.736" y1="169.175" x2="228.003" y2="66.036"/>
                            <g>
                                <path d="M232.167,61.667c-1.196,2.783-2.325,6.574-2.453,9.469l-2.257-4.526l-4.629-2.035
                                    C225.713,64.307,229.445,62.997,232.167,61.667z"/>
                            </g>
                        </g>
                    </g>
                    <g id="adown2">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="255.648" y1="64.277" x2="230.763" y2="115.156"/>
                            <g>
                                <path d="M228.111,120.578c0.301-3.014,0.234-6.969-0.517-9.768l3.516,3.635l5.027,0.544
                                    C233.467,116.114,230.304,118.489,228.111,120.578z"/>
                            </g>
                        </g>
                    </g>
                    <g id="aup2">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="221.631" y1="117.12" x2="246.14" y2="68.065"/>
                            <g>
                                <path d="M248.837,62.667c-0.326,3.011-0.293,6.967,0.435,9.772l-3.486-3.665l-5.022-0.586
                                    C243.443,67.085,246.626,64.736,248.837,62.667z"/>
                            </g>
                        </g>
                    </g>
                    <g id="adown3">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="277.633" y1="65.887" x2="292.376" y2="107.566"/>
                            <g>
                                <path d="M294.389,113.255c-1.939-2.326-4.811-5.048-7.334-6.472l5.059,0.036l3.908-3.207
                                    C294.954,106.306,294.436,110.227,294.389,113.255z"/>
                            </g>
                        </g>
                    </g>
                    <g id="aup3">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="301.736" y1="110.346" x2="287.232" y2="70.207"/>
                            <g>
                                <path d="M285.182,64.531c1.957,2.312,4.846,5.016,7.379,6.422l-5.059-0.001l-3.889,3.233
                                    C284.663,71.484,285.156,67.56,285.182,64.531z"/>
                            </g>
                        </g>
                    </g>
                    <g id="adown6">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="287.736" y1="61.667" x2="369.753" y2="168.849"/>
                            <g>
                                <path d="M373.421,173.642c-2.562-1.615-6.132-3.321-8.972-3.898l4.822-1.524l2.73-4.256
                                    C371.817,166.856,372.531,170.747,373.421,173.642z"/>
                            </g>
                        </g>
                    </g>
                    <g id="aup6">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="378.184" y1="169.97" x2="297.252" y2="66.422"/>
                            <g>
                                <path d="M293.535,61.667c2.579,1.589,6.165,3.258,9.011,3.806l-4.808,1.573l-2.687,4.284
                                    C295.208,68.436,294.454,64.553,293.535,61.667z"/>
                            </g>
                        </g>
                    </g>
                    <g id="adown4">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="264.648" y1="65.887" x2="226.369" y2="226.326"/>
                            <g>
                                <path d="M224.968,232.195c-0.366-3.006-1.297-6.852-2.643-9.418l4.227,2.777l5.024-0.57
                                    C229.217,226.668,226.651,229.68,224.968,232.195z"/>
                            </g>
                        </g>
                    </g>
                    <g id="aup4">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="219.762" y1="226.741" x2="257.534" y2="71.75"/>
                            <g>
                                <path d="M258.963,65.887c0.352,3.009,1.264,6.857,2.598,9.43l-4.213-2.797l-5.027,0.546
                                    C254.688,71.394,257.268,68.396,258.963,65.887z"/>
                            </g>
                        </g>
                    </g>
                    <g id="adown5">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="267.762" y1="67.887" x2="295.995" y2="227.984"/>
                            <g>
                                <path d="M297.043,233.928c-1.531-2.613-3.913-5.771-6.168-7.592l4.982,0.868l4.384-2.521
                                    C298.745,227.166,297.587,230.948,297.043,233.928z"/>
                            </g>
                        </g>
                    </g>
                    <g id="aup5">
                        <g>
                            
                                <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="2.003,2.0033" x1="300.885" y1="228.48" x2="273.027" y2="73.826"/>
                            <g>
                                <path d="M271.957,67.887c1.54,2.608,3.936,5.757,6.195,7.569l-4.985-0.85l-4.374,2.536
                                    C270.279,74.654,271.425,70.868,271.957,67.887z"/>
                            </g>
                        </g>
                    </g>
                    <text id="speeddown" transform="matrix(1 0 0 1 236.7642 277.834)" font-family="'Cmr17'" font-size="12">7 Mb/s</text>
                    <text id="speedup" transform="matrix(1 0 0 1 236.7642 136.334)" font-family="'Cmr17'" font-size="12">7 Mb/s</text>
                    </svg>


                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/velocity.min.js"></script>
    <script src="js/animation.js"></script>

</body>

</html>
